////
/// @group responsive-item
////

@use "sass:list";
@use "sass:map";
@use "sass:math";
@use "../utils";
@use "../spacing";
@use "../theme/colors";
@use "../theme/theme";

/// Set to `true` to disable all the styles.
///
/// NOTE: You most likely want to disable these styles and use the
/// `object-fit` styles instead.
///
/// @type Boolean
$disable-everything: false !default;

/// Set to `true` to disable automatically adding the `height: auto` and
/// `width: 100%` to each selector in the `$selectors` list.
///
/// @see $selectors
/// @type Boolean
$disable-auto: false !default;

/// Set to `true` to disable the full width styles.
/// @type Boolean
$disable-full-width: false !default;

/// Set to `true` to disable the `ResponsiveItemOverlay` styles.
/// @type Boolean
$disable-overlay: false !default;

/// Set to `true` to disable the `ResponsiveItemOverlay` `position="top"`
/// styles.
/// @type Boolean
$disable-overlay-top: false !default;

/// Set to `true` to disable the `ResponsiveItemOverlay` `position="right"`
/// styles.
/// @type Boolean
$disable-overlay-right: false !default;

/// Set to `true` to disable the `ResponsiveItemOverlay` `position="bottom"`
/// styles.
/// @type Boolean
$disable-overlay-bottom: false !default;

/// Set to `true` to disable the `ResponsiveItemOverlay` `position="left"`
/// styles.
/// @type Boolean
$disable-overlay-left: false !default;

/// Set to `true` to disable the `ResponsiveItemOverlay` `position="middle"`
/// styles.
/// @type Boolean
$disable-overlay-middle: false !default;

/// Set to `true` to disable the `ResponsiveItemOverlay` `position="center"`
/// styles.
/// @type Boolean
$disable-overlay-center: false !default;

/// Set to `true` to disable the `ResponsiveItemOverlay`
/// `position="absolute-center"` styles.
/// @type Boolean
$disable-overlay-absolute-center: false !default;

/// The default selectors to automatically apply the responsive item styles.
/// @type List
$selectors: (img ">svg" iframe video embed object) !default;

/// The default `ResponsiveItemOverlay` background color.
/// @type Color
$overlay-background-color: rgba(colors.$black, 0.54) !default;

/// The default `ResponsiveItemOverlay` text color.
/// @type Color
$overlay-color: theme.$dark-theme-text-primary-color !default;

/// The default `ResponsiveItemOverlay` z-index.
/// @type Number
$overlay-z-index: 0 !default;

/// The default `ResponsiveItemOverlay` padding.
/// @type Number
$overlay-padding: spacing.get-var(md) !default;

/// The default width to apply to the `position="left"`, `"position="right"`,
/// `position="center"`, or `position="absolute-center"`
/// `ResponsiveItemOverlay`.
/// @type Number
$overlay-horizontal-width: 30% !default;

/// The default aspect ratios to support which will be available on the
/// `ResponsiveItem` component.
/// @type Map
$aspect-ratios: (
  "16-9": 16 9,
  "4-3": 4 3,
  "1-1": 1 1,
) !default;

/// Set to `true` to disable the custom aspect ratios.
/// @type Boolean
$disable-aspect-ratios: not list.length(map.keys($aspect-ratios)) !default;

/// This mixin should really only be used if the `$disable-aspect-ratios` is
/// `true`
@mixin forced-aspect-ratio {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

/// Create a custom aspect ratio using `padding-bottom`.
///
/// @link https://css-tricks.com/aspect-ratio-boxes/
/// @param {Number} $width -
/// @param {Number} $height -
@mixin aspect-ratio($width, $height) {
  padding-bottom: math.percentage(math.div($height, $width));
}

/// This should only be used if not using the `responsive-item-styles` mixin.
///
/// @see {mixin} styles
@mixin base-styles {
  .rmd-responsive-item {
    display: inline-block;
    position: relative;

    @if not $disable-auto {
      &--auto {
        @each $selector in $selectors {
          #{$selector} {
            height: auto;
            width: 100%;
          }
        }
      }
    }

    @if not $disable-full-width {
      &--full-width {
        display: block;
        width: 100%;
      }
    }

    @if not $disable-aspect-ratios {
      &--aspect-ratio {
        display: block;
        height: 0;
        overflow: hidden;
        padding: 0;

        @each $selector in $selectors {
          #{$selector} {
            @include forced-aspect-ratio;
          }
        }
      }

      @each $suffix, $ratio-list in $aspect-ratios {
        &--#{$suffix} {
          @include aspect-ratio(
            list.nth($ratio-list, 1),
            list.nth($ratio-list, 2)
          );
        }
      }
    }
  }
}

/// This should only be used if not using the `responsive-item-styles` mixin.
///
/// @see {mixin} styles
@mixin overlay-styles {
  .rmd-responsive-item-overlay {
    background-color: $overlay-background-color;
    color: $overlay-color;
    padding: $overlay-padding;
    position: absolute;
    z-index: $overlay-z-index;

    @if not $disable-overlay-top {
      &--top {
        inset: 0 0 auto;
      }
    }

    @if not $disable-overlay-bottom {
      &--bottom {
        inset: auto 0 0;
      }
    }

    &--horizontal {
      inset: 0 auto;
      width: $overlay-horizontal-width;
    }

    @if not $disable-overlay-left {
      &--left {
        left: 0;

        @include utils.rtl {
          left: auto;
          right: 0;
        }
      }
    }

    @if not $disable-overlay-right {
      &--right {
        right: 0;

        @include utils.rtl {
          left: 0;
          right: auto;
        }
      }
    }

    @if not $disable-overlay-middle {
      &--middle {
        inset: auto 0 50%;
        transform: translate3d(0, 50%, 0);
      }
    }

    @if not $disable-overlay-center {
      &--center {
        inset: 0 50% 0 auto;
        transform: translate3d(50%, 0, 0);
      }
    }

    @if not $disable-overlay-absolute-center {
      &--absolute-center {
        inset: auto 50% 50% auto;
        transform: translate3d(50%, 50%, 0);
      }
    }
  }
}

/// Generates all the styles based on feature flags.
///
/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
/// layer behavior
@mixin styles($disable-layer: false) {
  @if not $disable-everything {
    @include utils.optional-layer(responsive-item, $disable-layer) {
      @include base-styles;

      @if not $disable-overlay {
        @include overlay-styles;
      }
    }
  }
}
